<template>
  <el-upload
             :action="`${path}${action}`"
             :headers="headers"
             :before-upload="beforeImageUpload"
             :on-progress="handleProgress"
             :on-success="handleSuccess"
             :on-error="handleError"
             :multiple="false"
             :disabled="loading"
             :showFileList="showFileList"
             :accept="accept">
    <slot name="image">
      <img
           v-if="modelValue && !showFileList && !isArray(modelValue)"
           class="w-full h-full rounded-lg"
           :src="modelValue" />
      <ElIcon v-else :size="26" class="text-black/25">
        <Plus />
      </ElIcon>
    </slot>
  </el-upload>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElIcon, ElMessage, UploadProgressEvent } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { isArray } from "lodash-es";
import appToken from "@/utils/appToken";
import setting from "@/utils/setting";

type TProps = {
  fileSize?: number; // kb
  action?: string;
  // compress?: boolean // 是否开启图片压缩，当size > 0 && 文件大小>size的时候，注意必须保证是图片
  limit?: number;
  accept?: string;
  showFileList?: boolean;
};

type TEmits = {
  (e: "error", v: any): void;
  (e: "success", v: string): void;
  (e: "loading", v: boolean): void;
};

const emits = defineEmits<TEmits>();
const modelValue = defineModel<string | string[]>();

const props = withDefaults(defineProps<TProps>(), {
  action: "/web/v1/tools/upload",
  fileSize: 1024 * 10,
  compress: true,
  limit: 1,
  cardSize: ".el-upload-list--picture-card",

  showFileList: false,
});

const path = ref(setting.requestHost);

const headers = {
  authorization: appToken.getToken(),
};

// 上传状态
const loading = ref(false);

const beforeImageUpload = (file: any) => {
  const { type, size } = file;
  const { fileSize } = props;





  // 限制阈值大于0 && 文件size大于阈值
  if (fileSize > 0 && size / 1024 > fileSize) {
    // 已开启压缩 && 图片类型
    if (false && compress && /^image\//.test(type)) {
      // 压缩
      // const compress = new ImageCompress(file, fileSize);
      // return compress.compress();
    } else {
      ElMessage.warning(`请上传${fileSize / 1024}MB内的文件`);
      return false;
    }
  }

  loading.value = true;
};

const handleSuccess = (res: any) => {
  loading.value = false;
  const { data } = res;

  if (data.urls) {
    modelValue.value = data.urls;
    emits("success", data.urls);
  }
};

function handleError(error: any) {
  // loading.value = false
  console.error("上传文件失败", error);
  ElMessage.error("文件上传失败");
  emits("error", error);
}

// 上传中
function handleProgress(
  pe: UploadProgressEvent
  // uploadFile: UploadFile,
  // uploadFiles: UploadFiles
) {
  if (pe.lengthComputable) {
    // progressBar.max = pe.total
    // progressBar.value = pe.loaded
  }
}
</script>

<style lang="less">
.el-upload--picture-card {
  --el-upload-picture-card-size: 100px;
}

.el-upload-list--picture-card {
  --el-upload-list-picture-card-size: 100px;
}

.el-upload-list--picture-card .el-progress {
  width: 100% !important;

  .el-progress-circle {
    height: 100% !important;
    width: 100% !important;
  }
}
</style>
